<!DOCTYPE HTML> 
<html>
<head>
  <meta charset="utf-8">
  <title>多个DIV变宽</title>
   <style>
       div{
	     width:100px;height:50px;background:red;margin:10px;	   
	   }
   </style>
   <script>
   window.onload=function(){
       var aDiv=document.getElementsByTagName("div");
	   for(var i=0;i<aDiv.length;i++){
	       aDiv[i].timer=null;
	       aDiv[i].onmouseover=function(){
		      startMove(this,400);
		   };
		   aDiv[i].onmouseout=function(){
		      startMove(this,100);
		   };
	   }	   	   
   };
     //运动框架函数
     var timer=null;
	 function startMove(obj,iTarget){
	    clearInterval(obj.timer);
		obj.timer=setInterval(function(){
		       var speed=(iTarget-obj.offsetWidth)/6;//计算模块运动的速度
			   speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
			   if(obj.offsetWidth==iTarget){
			       clearInterval(obj.timer);
			   }else{
			       obj.style.width=obj.offsetWidth+speed+"px";
			   }		
		},30); 
	 }  
   </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>